<template>
  <a-tree
    v-if="treeData.length"
    :checkable="showCheckBox"
    :tree-data="treeData"
    :defaultExpandAll="true"
    :fieldNames="{ title: 'name', key: 'key', children: 'children' }"
    @load="loaded"
    @check="nodeChecked"
    :autoExpandParent="true"
    v-model:checkedKeys="currCheckedKeys"
    :height="height"
  >
  </a-tree>
</template>
<script lang="ts">
import {
  defineComponent,
  ref,
  reactive,
  onMounted,
  onBeforeUnmount,
  defineEmits,
  watch,
} from "vue";
import ResultEnum from "@/config/ResultEnum";
import { message } from "ant-design-vue";
import { copyObjVal } from "@/utils/common";
import { PlusOutlined } from "@ant-design/icons-vue";
import request from "@/request";
import menus from "@/config/menus/index";

export default defineComponent({
  components: {
    PlusOutlined,
    menus,
  },
  props: {
    version: {
      type: String,
    },
    showCheckBox: {
      type: Boolean,
    },
    height: {
      type: Number,
    },
    checkedKeys: {
      default: [] as any,
    },
  },
  setup(props, context) {
    const currCheckedKeys = ref([] as any);
    const treeData = ref([] as any);
    const showCheckBox = ref(true);
    const realCheckedKeys = ref([] as any);
    const height = ref(500);

    const resetCheckedKeys = (data: any, keys: any) => {
      data.map((item: any) => {
        if (item.children && item.children.length > 0) {
          resetCheckedKeys(item.children, keys);
        } else {
          if (keys?.indexOf(item.key) > -1) {
            currCheckedKeys.value.push(item.key);
          }
        }
      });
    };

    const init = (val: string) => {};

    const getData = () => {
      return realCheckedKeys.value == null || realCheckedKeys.value == undefined ? [] : realCheckedKeys.value;
    };

    onMounted(() => {
      loadData();
    });

    const loadData = () => {
      console.log(menus);
      treeData.value = menus;
    };

    const loaded = (loadedKeys: any) => {};

    const nodeChecked = (checkedKeys: any, e: any) => {
      console.log(checkedKeys);
      //所有keys
      const checkedKeysResult = [...checkedKeys, ...e.halfCheckedKeys];
      console.log("checkedKeysReuslt is ", checkedKeysResult);
      realCheckedKeys.value = checkedKeysResult;
      console.log(realCheckedKeys.value);
    };

    watch(
      () => props.height,
      (newVal: any, oldVal: any) => {
        height.value = newVal;
      }
    );
    watch(
      () => props.version,
      (newVal: any, oldVal: any) => {
        loadData();
      }
    );
    watch(
      () => props.showCheckBox,
      (newVal: any, oldVal: any) => {
        showCheckBox.value = newVal;
      }
    );
    //监听设置选中的keys
    watch(
      () => props.checkedKeys,
      (newVal: any, oldVal: any) => {
        //currCheckedKeys.value = newVal;
        resetCheckedKeys(menus, newVal);
      },
      {
        immediate: true,
        deep: true,
      }
    );
    watch(currCheckedKeys, () => {
      console.log("checkedKeys", currCheckedKeys);
    });

    return {
      menus,
      treeData,
      showCheckBox,
      loaded,
      nodeChecked,
      currCheckedKeys,
      resetCheckedKeys,
      getData,
    };
  },
});
</script>
